<template>
  <div class="main">
    <div class="common-layout">
      <el-container class="main-content">
        <el-aside :width="isCollapse ? '60px' : '210px'">
          <nav-menu :isCollapse="isCollapse" />
        </el-aside>
        <el-container class="page">
          <el-header class="page-header">
            <NavHeader @foldChange="handleFoldChange" />
          </el-header>
          <el-main class="page-content">
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import NavMenu from "@/components/nav-menu";
import NavHeader from "@/components/nav-header";

export default defineComponent({
  components: {
    NavMenu,
    NavHeader,
  },
  setup() {
    const isCollapse = ref(false);
    const handleFoldChange = (isFold: boolean) => {
      isCollapse.value = isFold;
    };
    return {
      isCollapse,
      handleFoldChange,
    };
  },
});
</script>
<style scoped lang="less">
.main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .common-layout {
    width: 100%;
    height: 100%;
    .main-content,
    .page {
      height: 100%;
    }
    .page-content {
      height: calc(100%-48px);
    }
    .el-header,
    .el-footer {
      display: flex;
      color: #333;
      text-align: center;
      align-items: center;
    }
    .el-header {
      height: 48px !important;
    }
    .el-aside {
      overflow-x: hidden;
      overflow-y: auto;
      line-height: 200px;
      text-align: left;
      cursor: pointer;
      background-color: #001529;
      transition: width 0.3s linear;
      scrollbar-width: none;
      -ms-overflow-style: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .el-main {
      color: #333;
      text-align: center;
      background-color: #f0f2f5;
    }
  }
}
</style>
